<template>
	<view class="">

		<view class="con">
			<view class="top-h1">登录</view>
			<!-- #ifdef APP-PLUS -->
			<view class="login-form">
				<view class="login-form-item">
					<view style="display: flex;align-items: center;">
						<image class="login-left-icon" src="../../static/icon/mobile.png" mode=""></image>
						<input type="text" v-model="mobile" data-type="account" placeholder-class="inp-palcehoder"
							placeholder="请输入手机号"></input>
					</view>
				</view>
				<view class="login-form-item">
					<view style="display: flex;align-items: center;">
						<image class="login-left-icon" src="../../static/icon/password.png" mode=""></image>
						<input type="password" v-model="password" data-type="password"
							placeholder-class="inp-palcehoder" placeholder="请输入密码"></input>
					</view>
				</view>
			</view>
			<view class="authorized-btn" @tap="login">登录</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="">
				<u-divider text="快捷登录"></u-divider>
				<view class="third-login">
					<button style="width: 100%;" type="primary" @click="authLogin">授权登录</button>
				</view>
			</view>
			<!-- #endif -->
			<view class="agree">
				<image v-if="!isAgree" src="../../static/icon/checkbox.png" mode="" @tap="isAgree=true"></image>
				<image v-else src="../../static/icon/checkbox-checked.png" mode="" @tap="isAgree=false"></image>
				我已阅读并同意<text @tap="toAgreement('server-agreement')">《服务协议》</text>与<text
					@tap="toAgreement('privacy-agreement')">《隐私协议》</text>
			</view>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				credentials: '1111', // 密码
				mobile: '18543123847',
				password: '123456',
				isAgree: false,
				imageURL: '../../static/loginbg.png'

			};
		},

		onShow() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: "登录"
			});
		},



		methods: {

			authLogin() {
				const {
					isAgree,
					mobile,
					password
				} = this;
				const that = this
				if (!isAgree) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请勾选阅读并同意《服务协议》与《隐私协议》'
					})
					return
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes)
						that.request('login/wechat', {
							code: loginRes.code
						}, 'POST').then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '登录成功'
								})
								uni.setStorageSync('usertoken', res.data[0].token)
								uni.setStorageSync('username', res.data[0].username)
								if (uni.getStorageSync('mode') == 'scango') {
									uni.redirectTo({
										url: `/pages/stashresult/stashresult?id=${uni.getStorageSync('scangoodid')}`
									})
								} else {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: msg
								})
							}
						})
					}
				});
			},

			async login() {
				const {
					isAgree,
					mobile,
					password
				} = this;
				if (!isAgree) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请勾选阅读并同意《服务协议》与《隐私协议》'
					})
					return
				}

				if (!uni.$u.test.mobile(mobile)) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请输入正确格式的手机号'
					})
					return
				}
				const {
					data,
					code,
					msg
				} = await this.request('login/password', {
					mobile: this.mobile,
					password: password
				}, 'POST')
				if (code == 1) {
					uni.showToast({
						icon: 'none',
						title: '登录成功'
					})
					uni.setStorageSync('usertoken', data[0].token)
					uni.setStorageSync('username', data[0].username)
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: msg
					})
				}
			},
			toAgreement(url) {
				uni.navigateTo({
					url: `/pages/${url}/${url}`
				})
			},
			wxlogin() {
				this.$refs.uToast.show({
					position: 'top',
					message: '功能暂未开启'
				})
				return
			},



		}
	};
</script>
<style lang="scss" scoped>
	page {

		height: 100%;

	}

	.con {
		width: 750rpx;
		height: 100vh;
		background: linear-gradient(331deg, #5efce8, #2e8bf0);
		box-sizing: border-box;
		padding: 200rpx 25rpx 0 25rpx;
	}

	.top-h1 {
		font-size: 48rpx;
		color: #fff;
		margin-bottom: 20rpx;
		text-align: center;
		margin-bottom: 100rpx;
	}

	.top-h4 {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 100rpx;
	}

	.login-form {
		width: 96%;
		margin: 0 auto;
		margin-bottom: 20%;
	}

	.login-form-item {
		width: 100%;
		height: 80rpx;
		border-bottom: 3rpx solid #fefefe;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}

	.login-left-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.login-form-item input {
		height: 80rpx;
		font-size: 36rpx;
		color: #fff;
	}

	.get-code {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		background: #eee;
		color: #339af0;
		font-size: 24rpx;
	}

	.authorized-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(300deg, #52e5e7, #130cb7);
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.agree {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		padding-top: 20rpx;
		align-items: center;
		margin-bottom: 100rpx;
	}

	.agree image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.agree text {
		color: #339af0;

	}

	.third-login {
		width: 700rpx;
		display: flex;
		justify-content: center;
		padding-top: 20rpx;

	}

	.third-login image {
		width: 80rpx;
		height: 80rpx;
	}
</style>